<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回调函数</title>
    <style>
        .container {
            width: 600px;
            border: 1px dashed rgb(153, 153, 153);
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        
        .small-item {
            width: 180px;
            border: solid rgb(153, 153, 153) 2px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        img {
            width: 180px;
            vertical-align: top;
        }
        
        .buttons {
            width: 600px;
            margin: auto;
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="small-item">
            <img src="./images/宠物.jpg" alt="">
        </div>
        <div class="small-item">
            <p>N,我喜欢你</p>
        </div>
        <div class="small-item">
            <input type="password" name="" id="" value="12345678987654321">
        </div>
    </div>
    <div class="buttons">
        <button>改变图片</button>
        <button>改变颜色</button>
        <button>明文暗文</button>
    </div>

    <script>
        //获取相关节点
        let button = document.getElementsByTagName("button"); //获取按钮
        //let img = document.getElementsByTagName("img")[0]; //获取图片
        let smallItem = document.getElementsByClassName("small-item"); //获取小容器
        //let input = document.getElementsByTagName("input"); //获取文本框

        //1.改变图片
        //回调函数
        function changeImage(imgeUrl, callback) { //imgUrl相当于img   callback相当于   function(el){el.src="./images/黄昏.jpg";}
            //let imgeUrl = document.getElementsByTagName(imgeUrl)[0];   错误
            imgeUrl = document.getElementsByTagName(imgeUrl)[0];
            callback(imgeUrl); //方法作为参数传入函数  并且调用本身
        }
        //点击后改变图片地址
        let count = 1;
        button[0].onclick = function() {
            //changeImage(imgUrl,callback)
            if (count % 2 != 0) {
                changeImage("img", function(el) {
                    el.src = "./images/黄昏.jpg";
                });
            } else {
                changeImage("img", function(el) {
                    el.src = "./images/宠物.jpg";
                });
            }
            count++;
        }

        //2.改变颜色
        //回调函数
        function changeColor(article, callback) { //article相当于p   callback相当于   function(el){el.src="./images/黄昏.jpg";}
            //let imgeUrl = document.getElementsByTagName(imgeUrl)[0];   错误
            article = document.getElementsByTagName(article)[0];
            callback(article); //方法作为参数传入函数  并且调用本身
        }
        //点击后改变字体颜色
        let count1 = 1;
        button[1].onclick = function() {
            //changeImage(imgUrl,callback)
            if (count1 % 2 != 0) {
                changeColor("p", function(art) {
                    art.style.color = "red";
                });
            } else {
                changeColor("p", function(art) {
                    art.style.color = "black";
                });
            }
            count1++;
        }



        //3.明文/暗文
        //回调函数
        function changeText(txt, callback) { //article相当于p   callback相当于   function(el){el.src="./images/黄昏.jpg";}
            //let imgeUrl = document.getElementsByTagName(imgeUrl)[0];   错误
            txt = document.getElementsByTagName(txt)[0];
            callback(txt); //方法作为参数传入函数  并且调用本身
        }
        //点击后改变字体颜色
        let count2 = 1;
        button[2].onclick = function() {
            //changeImage(imgUrl,callback)
            if (count2 % 2 != 0) {
                changeText("input", function(tex) {
                    tex.type = "text";
                });
            } else {
                changeText("input", function(tex) {
                    tex.type = "password";
                });
            }
            count2++;
        }
    </script>
</body>

</html>